<template>
  <div class="main">
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <ul class="backgroundColor">
        <li class="list van-cell--clickable" v-for="item in list" :key="item.index">
          <div class="item-wrapper">
            <p class="content">{{ item.content }}</p>
            <p class="time">{{ item.time }}</p>
          </div>
          <div class="van-hairline--bottom bottom-fix"></div>
        </li>
      </ul>
    </van-list>
  </div>
</template>

<script type="text/ecmascript-6">
import { List, Cell } from 'vant'

export default {
  components: {
    [List.name]: List,
    [Cell.name]: Cell
  },

  data () {
    return {
      list: [],
      loading: false,
      finished: false
    }
  },
  created: function () {},
  methods: {
    onLoad () {
      setTimeout(() => {
        for (let i = 0; i < 4; i++) {
          this.list.push(this.getList())
        }
        this.loading = false

        if (this.list.length >= 1) {
          this.finished = true
        }
      }, 2000)
    },
    getList () {
      return {
        id: 1,
        content: '有一种战争，叫做湖人总冠军',
        time: 1525928701
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$top-control-margin-top: 0.4rem;

body {
  background-color: #f2f3f5;
}

p {
  margin: 0;
  padding: 0;
}

.van-list {
  padding-top: 0.2rem;
}

.backgroundColor {
  background-color: white;
}

.list {
  display: block;
  width: 100%;
  height: 2.01rem;
}
.item-wrapper {
  width: 80%;
  margin-left: 10%;
  text-align: center;
}

.content {
  padding-top: $top-control-margin-top;
  text-align: left;
  font-size: 16px;
  color: #000000;
}

.time {
  margin-top: 0.26rem;
  text-align: left;
  font-size: 13px;
  color: #979797;
}

.bottom-fix {
  padding-top: 0.37rem;
}
</style>
